<%@ tag pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="primus" uri="http://com.primus/tag/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ attribute name="fieldId" required="false" type="java.lang.Object" %>
<%@ attribute name="fieldName" required="true" type="java.lang.String" %>
<%@ attribute name="fieldValues" required="false" type="java.util.List" %>
<%@ taglib prefix="primus_dir" tagdir="/WEB-INF/tags" %>

<input type="hidden" id="${fieldId}" name="${fieldName}" value="${fn:join(fieldValues, ',')}" readonly/>
<primus:CouponTypeProductSelectTag fieldId="${fieldId}" fieldValues="${fn:join(fieldValues, ',')}"/>
<button id="${fieldId}-select" type="button" class="btn-sm btn btn-primary" data-toggle="modal"
        data-target="#product-select-${fieldId}">添加
</button>
<button id="${fieldId}-clear" type="button" class="btn-sm btn btn-primary">清除</button>
<div class="modal fade" id="product-select-${fieldId}" tabindex="-1" role="dialog"
     aria-labelledby="modal-label-${fieldId}" aria-hidden="true">
    <div class="modal-dialog" style="width: 80%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="modal-label-${fieldId}">选择商品</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="col-xs-1">
                            <select id="${fieldId}-text-type" class="col-xs-12">
                                <option value="name">名字</option>
                                <option value="code">编码</option>
                            </select>
                        </div>
                        <div class="col-xs-3">
                            <input id="${fieldId}-search-text" type="text"
                                   class="form-control"/>
                        </div>
                        <div class="col-xs-1 control-label">
                            <label for="${fieldId}-search-category">分类</label>
                        </div>
                        <div class="col-xs-2">
                            <primus_dir:couponTypeCategorySelect
                                    fieldId="${fieldId}-search-category"/>
                        </div>
                        <div class="col-xs-1 control-label">
                            <label for="${fieldId}-search-brand">品牌</label>
                        </div>
                        <div class="col-xs-2">
                            <primus_dir:couponTypeBrandSelect fieldId="${fieldId}-search-brand"/>
                        </div>
                        <div class="col-xs-2">
                            <button type="button" class="btn btn-primary btn-sm">搜索</button>
                        </div>
                    </div>
                    <br/>
                </div>
                <div class="row">
                    <hr/>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <table id="${fieldId}-table"></table>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/javascript">
    $(function () {

        var $body = $('body');

        $("#${fieldId}-select").on('click', function () {
            $("#${fieldId}-table").bootstrapTable({
                //请求方法
                method: 'get', //是否显示行间隔色
                striped: true, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                cache: false, //是否显示分页（*）
                pagination: true, //是否启用排序
                sortable: false, //排序方式
                sortOrder: "asc", //初始化加载第一页，默认第一页
                //我设置了这一项，但是貌似没起作用，而且我这默认是0,- -
                //pageNumber:1,
                //每页的记录行数（*）
                pageSize: 10, //可供选择的每页的行数（*）
                pageList: [10, 25, 50, 100], //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
                url: "management/couponType/products.do", //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
                //queryParamsType:'',
                ////查询参数,每次调用是会带上这个参数，可自定义
                queryParams: function (params) {
                    var text_type = $("#${fieldId}-text-type").val();
                    var search_text = $("#${fieldId}-search-text").val();
                    var category = $("#${fieldId}-search-category").val();
                    var brand = $("#${fieldId}-search-brand").val();
                    return {
                        type: text_type,
                        text: search_text,
                        category: category,
                        brand: brand,
                        pageNumber: params.offset + 1,
                        pageSize: params.limit
                    };
                }, //分页方式：client客户端分页，server服务端分页（*）
                sidePagination: "server", //是否显示搜索
                search: false, //Enable the strict search.
                strictSearch: true, //Indicate which field is an identity field.
                idField: "id", columns: [{
                    class: "${fieldId}-id-field",
                    field: 'id',
                    title: '',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<label class="checkbox"><input type="checkbox" value="'
                            + value
                            + '"/></label>';
                    }
                }, {
                    field: 'name', title: '名称', align: 'left'
                }, {
                    field: 'category', title: '分类', align: 'left'
                }, {
                    field: 'brand', title: '品牌', align: 'left'
                }]
            })
        });

        $body.on('click', ".${fieldId}-id-field > label > input[type=checkbox]", function () {
            var $field = $("#${fieldId}");
            var $name_field = $("#${fieldId}-names");
            var values = $field.val() === "" ? [] : $field.val().split(",");
            var names = $name_field.val() === "" ? [] : $name_field.val().split(",");
            var checked = $(this).prop("checked") === true;
            var checked_val = $(this).val();
            var checked_name = $(this).parent().parent().next().text();
            if (checked) {
                if (values.indexOf(checked_val) === -1) {
                    values.push($(this).val());
                    names.push(checked_name);
                    $field.val(values);
                    $name_field.val(names);
                }
            } else {
                if (values.indexOf(checked_val) !== -1) {
                    var new_values = [];
                    var new_names = [];
                    for (var i = 0; i < values.length; i++) {
                        if (values.indexOf(checked_val) !== i) {
                            new_values.push(values[i]);
                            new_names.push(names[i]);
                        }
                    }
                    $field.val(new_values);
                    $name_field.val(new_names);
                }
            }
        });

        $body.on('click', "#${fieldId}-clear", function () {
            $("#${fieldId}").val('');
            $("#${fieldId}-names").val('').text('');
        });
    });
</script>
